<template>
  <div>
    <Headers />

    <div class="content">
      <div class="left">
        <LeftUp class="left_up" />
        <LeftDown class="left_down" />
      </div>
      <div class="center">
        <CenterUp class="center_up" />
        <CenterDown class="center_down" />
      </div>
      <div class="right">
        <RightUp class="right_up" />
        <RightCenter class="right_center" />
        <RightDown class="right_down" />
      </div>
    </div>
  </div>
</template>


<script setup>
import Headers from "../../components/Header.vue";

import LeftUp from "./component/LeftUp.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightCenter from "./component/RightCenter.vue";
import RightDown from "./component/RightDown.vue";

import CenterUp from "./component/CenterUp.vue";
import CenterDown from "./component/CenterDown.vue";
</script>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 27%;
}
.left_up {
  margin: vh(10) vw(10);
  height: vh(230);
}
// .left_center {
//   margin: vh(10) vw(10);
//   height: vh(230);
// }
.left_down {
  margin: vh(10) vw(10);
  height: vh(470);
}
.center {
  /* flex-grow: 1; */
  width: 46%;
}
.center_up {
  height: vh(470);
  margin: vh(10) vw(10);
}
.center_down {
  height: vh(230);
  margin: vh(10) vw(10);
}
.right {
  width: 27%;
}
.right_up {
  margin: vh(10) vw(10);
  height: vh(230);
}
.right_center {
  margin: vh(10) vw(10);
  height: vh(230);
}
.right_down {
  margin: vh(10) vw(10);
  height: vh(230);
}
</style>